import {Modal, Button, message} from 'antd';
import Login from './Login';
import Register from './Register';
import React from 'react';
import UserAvater from './UserAvatar';
import reqwest from "reqwest";
import './LoginAndRegisterModal.css';
import EditorPro from './EditorPro';

class LoginAndRegisterModal extends React.Component {
    state = {
        loginVisible: false,
        loginConfirmLoading: false,
        registerVisible: false,
        registerConfirmLoading: false,
        writeVisible: false,
        writeConfirmLoading: false,
        user: undefined,
    };

    showLoginModal = () => {
        this.setState({
            loginVisible: true,
        });
    };

    showRegisterModal = () => {
        this.setState({
            registerVisible: true,
        });
    };

    showWriteModal = () => {
        if (this.state.user) {
            this.setState({
                writeVisible: true,
            });
        } else {
            message.warn('请先登录！', 1);
            this.setState({
                loginVisible: true,
            })
        }
    };

    componentDidMount() {
        reqwest({
            url: '/api/getLoginState',
            method: 'get',
            type: 'json',
            success: (res) => {
                if (res.user) {
                    this.setState({
                        user: res.user,
                    })
                }
            }
        })
    }

    handleLoginCancel = () => {
        this.setState({
            loginVisible: false,
        });
    };

    handleRegisterCancel = () => {
        this.setState({
            registerVisible: false,
        });
    };

    handleWriteCancel = () => {
        this.setState({
            writeVisible: false,
        })
    };

    handleClickRegisterInLogin = () => {
        this.setState({
            loginVisible: false,
            registerVisible: true,
        });
    };

    handleRegister = (user) => {
        this.setState({
            registerVisible: false,
            user: user,
        })
    };

    handleLogin = (user) => {
        this.setState({
            loginVisible: false,
            user: user,
        });
        message.success('登录成功!', 1);
    };

    handleLogout = (res) => {
        if (res.error === '') {
            this.setState({
                user: null,
            });
            message.success('注销成功!', 1);
        }
    };

    handleSubmit = (res) => {
        if (res.error === '') {
            this.setState({
                writeVisible: false,
            });
            message.success('发布成功！');
            document.location.reload();
        }
    };

    render() {
        const {loginVisible, loginConfirmLoading, registerVisible, registerConfirmLoading, user, writeConfirmLoading, writeVisible} = this.state;
        if (!user) {
            return (
                <div style={{float: 'right'}}>
                    <Button type="primary" onClick={this.showWriteModal} icon={'edit'} ghost
                            style={{marginRight: '10px'}}>写文章</Button>
                    <Modal title="Title"
                           visible={writeVisible}
                        // onOk={this.handleOk}
                           confirmLoading={writeConfirmLoading}
                           onCancel={this.handleWriteCancel}
                           footer={null}
                           style={{minWidth: '600px'}}
                    >
                        <EditorPro/>
                    </Modal>
                    <Button type="default" ghost onClick={this.showLoginModal} style={{border: '0px'}}>登录</Button>
                    <Modal title="登录"
                           visible={loginVisible}
                        // onOk={this.handleOk}
                           confirmLoading={loginConfirmLoading}
                           onCancel={this.handleLoginCancel}
                           style={{maxWidth: '300px'}}
                           footer={null}
                    >
                        <Login handleClickRegisterInLogin={this.handleClickRegisterInLogin}
                               handleLogin={this.handleLogin}/>
                    </Modal>
                    <Button type="default" ghost onClick={this.showRegisterModal} style={{border: '0px'}}>注册</Button>
                    <Modal title="注册"
                           visible={registerVisible}
                        // onOk={this.handleOk}
                           confirmLoading={registerConfirmLoading}
                           onCancel={this.handleRegisterCancel}
                        // style={{maxWidth: '300px'}}
                           footer={null}
                    >
                        <Register handleRegister={this.handleRegister}/>
                    </Modal>
                </div>
            );
        } else {
            return (
                <div style={{float: 'right'}}>
                    <Button type="primary" onClick={this.showWriteModal} icon={'edit'} ghost
                            style={{marginRight: '10px'}}>写文章</Button>
                    <Modal title="写文章"
                           visible={writeVisible}
                        // onOk={this.handleOk}
                           confirmLoading={writeConfirmLoading}
                           onCancel={this.handleWriteCancel}
                           footer={null}
                           style={{minWidth: '650px'}}
                    >
                        <EditorPro handleSubmit={this.handleSubmit}/>
                    </Modal>
                    <UserAvater name={user.name.substr(0, 1)} handleLogout={this.handleLogout}/>
                </div>
            )
        }
    }
}

export default LoginAndRegisterModal;